<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { addWebsiteApi, initWebsiteDTO } from '@/request/api/website'
import type { ResultType } from '@/type/type'
import letterTop from '@/assets/img/letterTop.png'
import letterBottom from '@/assets/img/letterBottom.png'
import { useUserStore } from '@/stores/user'
import { Code } from '@/request/code'
import { useSystemStore } from '@/stores/system'

const userStore = useUserStore()

const systemStore = useSystemStore()
const url = systemStore.getRandomImg()

const formRef = ref()
const data = reactive({
  form: initWebsiteDTO(),
  rules: {
    title: [{ required: true, message: '名称不能为空！', trigger: 'blur' }],
    url: [
      { required: true, message: '链接不能为空', trigger: 'blur' },
      {
        pattern: /^(http|https):\/\/([a-zA-Z0-9]+\.)+[a-z]+$/,
        message: '链接不正确！',
        trigger: 'blur'
      }
    ]
  }
})
const { form, rules } = toRefs(data)

const sendForm = () => {
  if (!userStore.user.id) {
    ElMessage.warning('请先登录！')
  }
  form.value.userId = userStore.user.id
  formRef.value.validate(async (valid: boolean) => {
    // 表单验证
    if (valid) {
      addWebsiteApi(form.value).then((res: ResultType<boolean>) => {
        if (res.code === Code.SUCCESS) {
          form.value = initWebsiteDTO()
        }
      })
    }
  })
}
let showLetter = ref<boolean>(false)
</script>

<template>
  <el-container
    class="relative pb-1 items-center justify-end min-h-[500px] max-sm:min-h-96 max-xs:min-h-72"
    direction="vertical"
  >
    <el-image
      :src="letterTop"
      class="z-0 cursor-pointer w-[520px] !absolute bottom-[125px] max-sm:bottom-[102px] max-sm:w-[420px] max-xs:w-80 max-xs:bottom-[78px]"
      fit="cover"
      @click="showLetter = !showLetter"
    />
    <div class="p-5 pb-0 z-10 w-[520px] max-sm:w-[420px] max-xs:w-80">
      <el-container
        :class="
          'use-radius relative use-transitions-size-long ' +
          (showLetter
            ? ' h-[825px] max-sm:h-[775px] max-xs:h-[660px]'
            : ' h-60 max-sm:h-48 max-xs:h-36')
        "
        direction="vertical"
      >
        <ImageBox :url="url" class="absolute max-h-56 max-xs:max-h-40" />
        <el-container
          class="use-second-bg mt-56 max-xs:mt-40 use-transitions-colors"
          direction="vertical"
        >
          <span class="flex justify-center pt-5">路漫漫其修远兮 </span>
          <el-form ref="formRef" :model="form" :rules="rules" class="p-5">
            <el-form-item prop="title">
              <el-input v-model="form.title" :maxlength="15" placeholder="名 称" />
            </el-form-item>
            <el-form-item prop="introduction">
              <el-input v-model="form.introduction" :maxlength="60" placeholder="简 介" />
            </el-form-item>
            <el-form-item prop="url">
              <el-input v-model="form.url" :maxlength="120" placeholder="链 接" />
            </el-form-item>
            <el-form-item prop="avatar">
              <el-input v-model="form.avatar" :maxlength="120" placeholder="头 像" />
            </el-form-item>
            <el-form-item prop="cover">
              <el-input v-model="form.cover" :maxlength="120" placeholder="封面" />
            </el-form-item>
            <a
              class="flex py-1 use-radius-xs use-transitions-shadow-short use-hover-bg justify-center mt-5"
              href="#"
              @click="sendForm"
            >
              提 交
            </a>
            <span class="flex justify-center pt-5">吾将上下而求索</span>
          </el-form>
        </el-container>
      </el-container>
    </div>
    <el-image
      :src="letterBottom"
      class="z-20 cursor-pointer w-[520px] !absolute bottom-0 max-sm:w-[420px] max-xs:w-80"
      fit="cover"
      @click="showLetter = !showLetter"
    />
  </el-container>
</template>

<style lang="scss" scoped></style>
